<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>07Vue列表渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<h1> item </h1>
	<ul id="example-1">
	  <li v-for="item in items">
	    {{ item.message }} 
	  </li>
	  <span>------------------</span>
	  <li v-for="testItem in items">
	  	{{testItem.message}}
	  </li>
	</ul>

	<h1> index 和item </h1>
	<ul id="example-2">
	  <li v-for="(item, index) in items" >
	    {{ parentMessage }} - {{ index }} - {{ item.message }}
	  </li>
	  <span>----------------------</span>
	  <li v-for="(item, testIndex) in items" >
	    {{ parentMessage }} - {{ testIndex }} - {{ item.message }}
	  </li>
	  <span>-----------------</span>
	  <!-- 第一个参数是 对象 第二个是index 序号 -->
	  <li v-for="(itemA,itemB) in items">
	  	{{itemA.message}}---{{itemB}}
	  </li>
	</ul>

	<h1> -------------value 遍历对象</h1>
	<ul id="v-for-object" >
	  <li v-for="value in object">
	    {{ value }}
	  </li>
	</ul>

	<h1>---------------遍历对象--key 和value</h1>
	<div id="v-for-object-2" >
	  <p v-for="(value, key) in object">{{ key }}- {{ value }}</p>
	  <span>--------------------</span>
	  <!-- 第一个参数 是value，第二个是key,第三个是index -->
	  <p v-for="(value, key,index) in object">{{index}}-{{ key }}- {{ value }}</p>
	</div>

	<h1>---------------------n</h1>
	<div id="example-3">
	  <span v-for="n in 10">{{ n }} </span>
	</div>
</body>
<script type="text/javascript">
	var example1 = new Vue({
	  el: '#example-1',
	  data: {
	    items: [
	      { message: 'Foo' },
	      { message: 'Bar' }
	    ]
	  }
	})

	var example2 = new Vue({
	  el: '#example-2',
	  data: {
	    parentMessage: 'Parent',
	    items: [
	      { message: 'Foo' },
	      { message: 'Bar' }
	    ]
	  }
	})


	new Vue({
	  el: '#v-for-object',
	  data: {
	    object: {
	      firstName: 'John',
	      lastName: 'Doe',
	      age: 30
	    }
	  }
	})

	new Vue({
	  el: '#v-for-object-2',
	  data: {
	    object: {
	      firstName: 'John',
	      lastName: 'Doe',
	      age: 30
	    }
	  }
	})

	new Vue({
		el:'#example-3'
	})

</script>
</html>